<template>
  <div class="bottomRight">
    <div class="bg-color-black">
      <div v-if="!isStop" :class="warnShadow">
        <Chart :cdata="cdata" />
      </div>
      <div v-else>
        <div
          style="
            font-size: 35px;
            text-align: center;
            height: 300px;
            font-weight: 700;
            letter-spacing: 24px;
            padding-top: 130px;
          "
        >
          停机
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  defineComponent,
  defineProps,
  reactive,
  onMounted,
  ref,
  onUnmounted,
  useAttrs,
  computed,
} from "vue";
import { useStore } from "vuex";
import Chart from "./chart/draw";

const store = useStore();
const attrs = useAttrs();
console.log(attrs);
const cdata = reactive({
  seriesData: [],
});

let warnShadow = ref("warnShadow");
let isStop = ref(true);
cdata.seriesData = computed(() => {
  if (attrs["chart-data"]) {
    console.log(store.state.chartData);
    const tmp = store.state.chartData.filter(
      (o) => o.name === attrs["chart-data"]
    );
    console.log(tmp);
    if (tmp[0]) {
      warnShadow.value = "";
      return tmp[0].data;
    } else {
      isStop.value = true;
    }
  }
});
</script>

<style lang="scss" class>
$box-height: 100%;
$box-width: 100%;
.bottomRight {
  // padding: 14px 16px;
  padding: 6px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: calc($box-height - 0px);
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 300px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}

.warnShadow {
  border-radius: 10px;
  animation: warnShadow 1s infinite alternate;
}

@keyframes warnShadow {
  from {
    box-shadow: 0px 0px 20px 5px #c11616 inset;
  }
  to {
    box-shadow: 0px 0px 50px 10px #c11616 inset;
  }
}
</style>
